<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        {include file="public/static" /}
        <link rel="stylesheet" href="__components__/eleTree/eleTree.css" media="all">
        <style>
            .layui-form-item{
                width: 60rem;
                margin: 1.5rem auto;
            }
            .layui-form-item .layui-input-inline, .layui-inline{
                width: 40rem !important;
            }
            .layui-inline .layui-input-inline{
                width: 100% !important;
            }
            .ele5{
                width: 95% !important;
                z-index: 99999;
            }
            .layui-form-select dl{
                z-index: 99999;
            }
            #contentDom{
                display: none;
            }
            #urlDom{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <input type="hidden" id="id" name="id" value="{$info.ac_id}" />
                    <input type="hidden" id="pid" name="pid" value="{$info.ac_pid}" />
                    <div class="layui-form-item">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>上级分类
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" disabled value="{$parent}" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="status" class="layui-form-label">
                            <span class="x-red">*</span>移动分类
                        </label>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" readonly name="role" placeholder="移动到分类下级" autocomplete="off" class="layui-input" value="" />
                                <div class="eleTree ele5" lay-filter="data5"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                      <label for="title" class="layui-form-label">
                          <span class="x-red">*</span>标题
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" id="title" name="title" value="{$info.ac_title}" lay-verify="title"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                    <div class="layui-form-item">
                        <label for="status" class="layui-form-label">
                            <span class="x-red">*</span>类型
                        </label>
                        <div class="layui-inline">
                            <select name="type" id="type" lay-filter="type">
                                <option value="1" {eq name="info.ac_type" value="1"} selected {/eq}>分类</option>
                                <option value="2" {eq name="info.ac_type" value="2"} selected {/eq}>文章</option>
                                <option value="3" {eq name="info.ac_type" value="3"} selected {/eq}>链接</option>
                            </select>
                        </div>
                    </div>
                    <div id="contentDom">
                        <div class="layui-form-item">
                            <label for="name" class="layui-form-label">
                                <span class="x-red">*</span>内容
                            </label>
                            <div class="layui-input-inline">
								<textarea id="content" name="content" lay-verify="content">{:html_entity_decode($info.ac_content)}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="name" class="layui-form-label">
                                <span class="x-red">*</span>发布时间
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" readonly placeholder="点击选择时间" id="time" name="time" value="{$info.ac_time|date='Y-m-d H:i:s'}" lay-verify="time"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="urlDom">
                        <label for="title" class="layui-form-label">
                            <span class="x-red">*</span>链接
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="url" name="url" value="{$info.ac_url}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                  <div class="layui-form-item">
                      <label for="status" class="layui-form-label">
                          <span class="x-red">*</span>状态
                      </label>
                      <div class="layui-inline">
                          <select name="status" id="status">
                              <option value="1" {eq name="info.ac_status" value="1"} selected {/eq}>启用</option>
                              <option value="0" {eq name="info.ac_status" value="0"} selected {/eq}>禁用</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                  </div>
              </form>
            </div>
        </div>
        <script>
            $(function () {
                const type = Number("{$info.ac_type}")
                if(type == 1){
                    $("#contentDom").hide()
                    $("#urlDom").hide()
                //文章
                }else if(type == 2){
                    $("#contentDom").show()
                    $("#urlDom").hide()
                //链接
                }else{
                    $("#contentDom").hide()
                    $("#urlDom").show()
                }
            });
			/**创建编辑器*/
            common.tinymce("#content", 500, "{:url('Index/tinymceImgUpload')}");
            /**发布日期*/
            const date = [
                {elem: '#time', style: 'datetime', max: '23:59:59', type: 'datetime', format:'yyyy-MM-dd HH:mm:ss', trigger: 'click'}
            ];
            common.setDateControls(date);
            /**树形组件获取分类列表*/
            const list = common.getTreeMenuList("{:url('Article/getClassify')}");
            const info = {name:"role", className:".ele5", nodeClick:"data5", inputId: "#pid"};
            common.treeMenu(list, info);
            /**验证提交*/
            layui.use(['form', 'layer'], function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                /*监听类型选择*/
                form.on('select(type)', function(data){
                    //分类
                    if(data.value == 1){
                        $("#contentDom").hide()
                        $("#urlDom").hide()
                        //文章
                    }else if(data.value == 2){
                        $("#contentDom").show()
                        $("#urlDom").hide()
                        //链接
                    }else{
                        $("#contentDom").hide()
                        $("#urlDom").show()
                    }
                });
                //自定义验证规则
                form.verify({
                    //名称
                    title: function(value) {
                        if (value.length < 1) {
                            return '分类名称不能为空';
                        }
                    }
                });
                //监听提交
                form.on('submit(add)', function(data) {
                    var index = layer.load();
                    //发异步，把数据提交给php
                    $.ajax({
                        type:"post",
                        url:"{:url('Article/articleClassifyEdit')}",
                        data: data.field,
                        dataType: 'json',
                        success:function (data) {
                            if(data.status === 1){
                                layer.msg(data.info, {icon: 6,time:1500}, function() {
                                    /*关闭弹出层并刷新*/
                                    common.closeWindowReload();
                                });
                            }else{
                                layer.msg(data.info, {icon: 5,time:1500});
                            }
                            layer.close(index);

                        },
                        error:function (data) {
                            console.log(data);
                            layer.msg("不好意思，出现了一点问题", {icon: 5});
                        }
                    });
                    //必须加上return false，不然无法关闭iframe
                    return false;
                });
            });
        </script>
    </body>
</html>
